<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示</title>
    <link rel="stylesheet" href="./utils/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/pruduct.css">
</head>

<body>
    <div class="wrap">
        <!-- 导航栏 -->
        <nav>
            <div class="navBox">
                <div class="logo">
                    <img src="./images/logo.png" alt="">
                </div>
                <div class="navbar">
                    <ul>
                        <li><a href="./index.html">首页</a></li>
                        <li><a href="./about.html">关于我们</a></li>
                        <li><a href="./product.html">产品展示</a></li>
                        <li><a href="./terminal.html">终端形象</a></li>
                        <li><a href="./news.html">新闻中心</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- banner -->
        <div class="banner">
            <img src="./images/banner_03.png" alt="">
        </div>

        <!-- 产品展示主体部分 -->
        <main>
            <!-- 钻戒系列板块 -->
            <div class="top-diamond">
                <div class="container">
                    <!--标题-->
                    <div class="title">
                        <div class="chineseTitle">
                            <h1>钻戒系列</h1>
                        </div>
                        <div class="level-line"></div>
                    </div>
                    <!-- 内容盒子 -->
                    <div class="diamond-con">
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_01.png" alt="">
                            </div>
                            <div class="text-box firstText">
                                <p>铂金全环共爪式钻戒镶嵌圆形明亮式切割钻石</p>
                            </div>
                            <!-- 遮罩 -->
                            <div class="mask">
                                <div>
                                    <p>钻戒系列</p>
                                    <p>Tison钻石戒指</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_02.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_03.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_04.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_05.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_06.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_07.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>
                        <div class="flex-box first-ring">
                            <div class="img-box">
                                <img src="./images/ring_08.png" alt="">
                            </div>
                            <div class="text-box">
                                <!-- <p>铂金全环共爪式钻戒 镶嵌圆形明亮式切割钻石</p> -->
                            </div>
                        </div>



                    </div>
                </div>
            </div>
            <!-- 中间广告banner板块 -->
            <div class="center-banner">
                <div class="lightbox">
                    <div class="container">
                        <div>
                            <p>有一种永恒的爱 </p>
                            <p>叫蒂森&TISON</p>
                            <p>there-is-an-everlasting-love-this-is-tison </p>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 项链系列板块 -->
            <div class="footer-necklace">
                <div class="container">
                    <!--标题-->
                    <div class="title">
                        <div class="chineseTitle">
                            <h1>项链系列</h1>

                        </div>
                        <div class="level-line"></div>
                    </div>
                    <ul class="necklaceBox">
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_01.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_02.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_03.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_04.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_05.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_06.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_07.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_08.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                        <li>
                            <div class="necklaceImg">
                                <img src="./images/necklace_09.png" alt="">
                            </div>
                            <div class="textBox">
                                <h3>Tison & Love系列 奢华版 钻石套链</h3>
                                <p>数万年等待，只为遇见你</p>
                                <button>TISON</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </main>

        <!-- 底部 -->
        <footer>
            <div class="container">
                <div class="footerTop">
                    <div class="footerTopLeft">
                        <ul class="topLeftHeader">
                            <li>加入我们</li>
                            <li>联系我们</li>
                            <li>法律声明</li>
                        </ul>
                        <ul class="topLeftFooter">
                            <li><i class="iconfont icon-icon"></i></li>
                            <li><i class="iconfont icon-tencentqq "></i></li>
                            <li><i class="iconfont icon-weibo"></i></li>
                        </ul>
                    </div>
                    <div class="footerTopCenter">
                        <div class="infoBox">
                            <h2>联系方式/CONTACTUS</h2>
                            <p>公司名称：黑龙江蒂森珠宝股份有限公司</p>
                            <P>公司地址：黑龙江省哈尔滨市道里区上海街海拉尔胡同88号</P>
                            <p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：150000</p>
                            <p>联系电话：0451-3423758</p>
                        </div>
                    </div>
                    <div class="footerTopRight">
                        <div class="code">
                            <img src="./images/code.png" alt="">
                            <p>扫一扫，加关注</p>
                        </div>
                    </div>
                </div>
                <div class="footerBottom"><i class="iconfont icon-banquan">2019版权</i></div>
            </div>
        </footer>
    </div>
</body>

</html>